<template>
    <!-- 预约添加 -->
    <el-divider content-position="left">预约登记</el-divider>
    <div style="margin-left: 20px;">
        <el-form ref="from" :model="formData" :rules="formRules" style="max-width: 500px" label-width="auto"
            label-position="right" class="demo-form-inline">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="formData.name" placeholder="请输入姓名" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="年龄" prop="age" class="right-col">
                        <el-input-number v-model="formData.age" placeholder="年龄" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="电话">
                        <el-input v-model="formData.phone" maxlength="11" show-word-limit placeholder="请输入电话"
                            clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="11" class="right-col">
                    <el-form-item label="性别">
                        <el-radio-group v-model="formData.sex">
                            <el-radio value="1" size="large">男</el-radio>
                            <el-radio value="0" size="large">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="出生日期">
                        <el-date-picker v-model="formData.dob" type="date" placeholder="选择日期" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="11" class="right-col">
                    <el-form-item label="预约日期">
                        <el-date-picker v-model="formData.appointmentDate" type="datetime" placeholder="选择日期" clearable
                            format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="症状">
                        <el-select v-model="formData.symptom" placeholder="选择症状" clearable>
                            <el-option v-for="(item, index) in symptomlist" :key="index" :label="item.name" :value="item.name" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11" class="right-col">
                    <el-form-item label="病情描述">
                        <el-select v-model="formData.description" placeholder="选择病情描述" clearable>
                            <el-option v-for="(item, index) in illlist" :key="index" :label="item.name" :value="item.name" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="过敏史">
                        <el-input v-model="formData.allergy" placeholder="请输入过敏史" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="11" class="right-col">
                    <el-form-item label="禁忌">
                        <el-input v-model="formData.taboo" placeholder="请输入禁忌" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="选择医生">
                        <el-select v-model="formData.doctorId" placeholder="选择预约医生" clearable>
                            <el-option v-for="item in doctorList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11" class="right-col">
                    <el-form-item>
                        <el-button type="warning" @click="reset()">重置</el-button>
                        <el-button type="primary" @click="onsubmit()">登记</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <el-divider content-position="left">预约列表</el-divider>
    <!-- 预约列表 -->
    <el-row>
        <el-input v-model="searchText" placeholder="请输入姓名" style="width: 150px;margin-bottom: 20px;margin-left: 20px;"
            @change="search()" />
        <el-col>
            <el-table :data="list" max-height="530px" border stripe style="width: 1200px;margin-left: 20px;">
                <el-table-column prop="name" label="姓名" width="120px" />
                <el-table-column prop="age" label="年龄" width="120px" />
                <el-table-column prop="phone" label="电话" />
                <el-table-column prop="doctorName" label="预约医生" />
                <el-table-column prop="appointmentDate" label="预约时间" />
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <el-button type="danger" size="small" @click="cancel(scope.row.id)">取消预约</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <el-divider content-position="center">End</el-divider>
    <el-backtop :right="100" :bottom="100" style="background-color: yellow;" />
</template>

<script>
import { typeDoctor, appointment, appointmentList, appointmentDel,userConfigByType } from '@/views/api';
import { ElNotification, ElMessageBox } from 'element-plus';
import { ref } from "vue"

export default {
    data() {
        return {
            formData: {
                name: "",
                sex: null,
                phone: "",
                age: null,
                address: "",
                dob: null,
                appointmentDate: null,
                symptom: "",
                allergy: "",
                taboo: "",
                description: "",
                doctorId: null,
            },
            // 医生列表
            doctorList: [],
            // 病情列表
            illlist: [],
            // 症状列表
            symptomlist: [],
            list: [],
            searchText: ref(""),
            formRules: {
                name: [{
                    required: true,
                    message: "账号不能为空",
                    trigger: "blur"
                }],
                age: [{
                    required: true,
                    message: "密码不能为空",
                    trigger: "blur"
                }]
            }
        }

    },
    methods: {
        // 提交
        onsubmit() {
            this.$refs.from.validate(vaild => {
                if (vaild) {
                    appointment(this.formData).then(res => {
                        if (res.data.data) {
                            this.isShowAdd = false;
                            setTimeout(2000)
                            ElMessageBox({
                                message: '添加成功',
                                type: 'success'
                            }).then(() => {
                                location.reload();
                            })
                        } else {
                            ElNotification({
                                message: '添加失败',
                                type: 'error'
                            })
                        }
                    })
                }
            })
        },
        // 重置
        reset() {
            this.formData = {
                name: "",
                sex: null,
                phone: "",
                age: null,
                address: "",
                dob: null,
                appointmentDate: null,
                symptom: "",
                allergy: "",
                taboo: "",
                description: "",
                doctorId: null,
            }
        },
        // 取消预约
        cancel(id) {
            appointmentDel({ id: id }).then(res => {
                if (res.data.data) {
                    ElNotification({
                        message: '取消成功',
                        type: 'success'
                    })
                    setTimeout(2000)
                    location.reload();

                } else {
                    ElNotification({
                        message: '取消失败',
                        type: 'error'
                    })
                }
            })
        },
        search() {
            appointmentList({ name: this.searchText }).then(res => {
                this.list = res.data.data
            })
        }
    },
    mounted() {
        // 获取医生列表1-工作中
        typeDoctor({ type: 1 }).then(res => {
            this.doctorList = res.data.data
        }),
            appointmentList().then(res => {
                this.list = res.data.data
            }),
            userConfigByType({ type: 3 }).then(
                res => {
                    this.symptomlist = res.data.data;
                }
            ),
            userConfigByType({ type: 4 }).then(
                res => {
                    this.illlist = res.data.data;
                }
            )
    }
}
</script>

<style>
.right-col {
    margin-left: 20px;
}
</style>